<template>
  <div class="addone">
    <hunk-head customEvent="true" @headFn="gobanck" name="添加房源"></hunk-head>
    <div class="addList">
      <div class="list-input">
        <div class="list-item">
          <div class="leftlable">省份</div>
            <div class="check"> 
              <picker class="select" mode="selector" :value="index" :range="rawCitiesData" range-key="name" @change="checkItem">
                <view @click="tips(0)">{{list.province}}</view>
              </picker>
          </div>
        </div>
        <div class="list-item">
          <div class="leftlable">城市</div>
          <div class="check">
            <!-- 请选择所在城市 > -->
            <!-- <uni-combox label="" :candidates="candidatesCity" placeholder="请选择所在城市" v-model="list.city"></uni-combox> -->
              <picker class="select" mode="selector" :value="index" :range="candidatesCity" :disabled = "disabledCity" range-key="name" @change="checkCity">
                <view @click="tips(1)">{{list.city}}</view>
              </picker>
          </div>
        </div>
        <div class="list-item">
          <div class="leftlable">区域</div>
          <div class="check">
            <!-- <uni-combox label="" :candidates="candidatesArea" placeholder="请选择所在区域" v-model="list.area"></uni-combox> -->
            <!-- <input type="text" disabled="disabled" v-model="list.area" placeholder="请选择所在区域"> -->
            <picker class="select" :disabled = "disabledArea" mode="selector" :value="index" :range="candidatesArea" range-key="name" @change="checkArea">
                <view @click="tips(2)">{{list.area}}</view>
              </picker>
          </div>
        </div>
      </div>
      <div class="tips">
        <img v-if="baseUrl" :src="baseUrl+'house/smalhouse.png'" >
        <p>房屋地址： {{smallprovince}}{{smallcity}}{{smallarea}}</p>
      </div>
      <button class="bextBtn" @click="nextStep">下一步</button>
    </div>
    
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import rawCitiesData from '@utils/city-picker'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      index: 0,
      list: {
        province: '请选择所在省份',
        city: '请选择所在城市',
        area: '请选择所在区域',
      },
      smallprovince: '**省',
      smallcity: '**市',
      smallarea: '**区',
      // disabledCity: true,
      // disabledArea: true,
      rawCitiesData,
      candidatesProvince:null,
      candidatesCity:null,
      candidatesArea: null,
      // isWriteAll: false,
      info:null
    }
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    },
    disabledCity(){
      if(this.list.province == '请选择所在省份'){
        return true
      }else{
        return false
      }
    },
    disabledArea(){
      if(this.list.city == '请选择所在城市'){
        return true
      }else{
        return false
      }
    },
    isWriteAll(){
      if(this.list.area == '请选择所在区域'){
        return false
      }else{
        return true
      }
    }
  },
  onLoad(e){
    console.log(98989,e)
    if(e.query){
      this.info = JSON.parse(e.query)
      this.list.province = this.info.province
      this.list.area = this.info.area
      this.list.city = this.info.city
      this.smallprovince = this.info.province
      this.smallcity = this.info.city
      this.smallarea = this.info.area
      console.log('rawCitiesData',this.rawCitiesData.length)
      let that = this
      this.rawCitiesData.forEach((element,index) => {
        if( element.name == that.info.province ){
          that.candidatesCity = that.rawCitiesData[index].sub
        }
      })
      this.candidatesCity.forEach((element,index) => {
        if( element.name == that.info.city ){
          that.candidatesArea = that.candidatesCity[index].sub
        }
      })
    }
  },
  methods: {
    gobanck(){
      if(this.info){
        uni.navigateBack({ delta: 1 })
      }else{
        uni.redirectTo({ url: '/pages/index/index' })
      }
    },
    nextStep(){
      let that = this
      if(this.isWriteAll){
        if(this.info){
          uni.navigateTo({ url: '/subPackage/manage/commponents/addhouse/addtwo?query=' + JSON.stringify({list:that.list,info:that.info}) })
        }else{
          uni.navigateTo({ url: '/subPackage/manage/commponents/addhouse/addtwo?query=' + JSON.stringify(that.list) })
        }
        
      }else{
        uni.showToast({
          title: '请先填写完整',
          icon: 'error'
        })
      }
      
    },
    openProvince(){
      this.$refs.popup1.open()
      this.visible = true
    },
    tips(id){
      if(id == 0){
        // this.disabledCity = false
      }
      if(id == 1){
        console.log('dddddd',this.disabledCity,this.list.province)
        if(this.disabledCity || this.list.province == '请选择所在省份'){
          uni.showToast({
            title: '请先选择省份',
            icon: 'error'
          });
        }
      }
      if(id == 2){
        if(this.disabledArea){
          uni.showToast({
            title: '请先选择城市',
            icon: 'error'
          })
        }
      }
    },
    checkItem(e){
      console.log(888,e)
      const id = e.detail.value
      this.list.province = this.rawCitiesData[id].name
      this.candidatesCity = this.rawCitiesData[id].sub
      this.smallprovince = this.rawCitiesData[id].name
      // this.disabledCity = false
    },
    checkCity(e){
      console.log(999,e)
      const id = e.detail.value
      this.list.city = this.candidatesCity[id].name
      this.smallcity = this.candidatesCity[id].name
      this.candidatesArea = this.candidatesCity[id].sub
    },
    checkArea(e){
      console.log(777,e)
      const id = e.detail.value
      this.list.area = this.candidatesArea[id].name
      this.smallarea = this.candidatesArea[id].name
      // this.isWriteAll = true
    }
  }
}
</script>

<style lang="scss" scoped>
.addone {
  @include num();
  background: #F9F9F9;
  .addList{
    padding: 0 15px;
    .list-input{
      .list-item{
        height: 44px;
        border-bottom: 2px solid #EFEFEF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .leftlable{
          height: 44px;
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 44px;
        }
        .check{
          height: 44px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #9B9B9B;
          line-height: 44px;
          uni-input{
            height: 100%;
          }
          input{
            text-align: right;
          }
        }
      }
    }
    .tips{
      margin: 10px 0 20px 0;
      height: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p{
        display: inline-block;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9B9B9B;
        line-height: 20px;
        text-align: right;
        vertical-align: middle;
        
      }
      img{
        width: 14px;
        height: 15px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .bextBtn{
      width: 345px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
      border-radius: 100px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 45px;
      text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
      &::after{
        border: 0;
      }
    }
  }
}
.picker-view{
  height: 200px;
  width: 100%;
  background: #fff;
  .item{
    text-align: center;
    line-height: 50px;
  }
}
</style>
